<template>
  <div id="coupon">
    <i-tabs :current="current" @change="handleChange" fixed color="#41B962">
      <i-tab key="tab1" title="全部">
      </i-tab>
      <i-tab key="tab2" title="未使用"></i-tab>
      <i-tab key="tab3" title="已使用"></i-tab>
      <i-tab key="tab4" title="已过期"></i-tab>
    </i-tabs>
    <div class="mt50 pl13-pt13">
      <ul v-if="current === 'tab1'"
      >
        <li v-for="item in coupons" :key="item.index">
          <section :class="{using: status !== item.status}">
            <p style="font-size: 18px;" class="line-devidler">· · · ·</p>
            <p class="tc">{{item.decPrice}}<span>￥</span></p>
            <p style="font-size: 12px;" class="tc"><a>立即使用</a></p>
          </section>
          <aside class="pl15">
            <h2 class="f16" :class="{use: status !== item.status}">满{{item.fullPrice}}元使用</h2>
            <span class="mt10 f14">有效期 2018/11/27-2019/02/15</span>
          </aside>
          <img v-if="item.status === 2" src="../img/using.png" width="104"/>
          <img v-else-if="item.status === 3" src="../img/overdue.png" width="104"/>
          <a class="rurels f12" href="./using-ruler/main">使用规则</a>
        </li>
      </ul>
      <ul v-else-if="current === 'tab2'">
        <li v-if="item.status === 1" v-for="item in coupons" :key="item.index">
          <section :class="{using: status !== item.status}">
            <p style="font-size: 18px;" class="line-devidler">· · · ·</p>
            <p class="tc">{{item.decPrice}}<span>￥</span></p>
            <p style="font-size: 12px;" class="tc"><a>立即使用</a></p>
          </section>
          <aside class="pl15">
            <h2 class="f16" :class="{use: status !== item.status}">满{{item.fullPrice}}元使用</h2>
            <span class="mt10 f14">有效期 2018/11/27-2019/02/15</span>
          </aside>
          <img v-if="item.status === 2" src="../img/using.png" width="104"/>
          <img v-else-if="item.status === 3" src="../img/overdue.png" width="104"/>
          <a class="rurels f12" href="./using-ruler/main">使用规则</a>
        </li>
      </ul>
      <ul v-else-if="current === 'tab3'">
        <li v-if="item.status === 2" v-for="item in coupons" :key="item.index">
          <section :class="{using: status !== item.status}">
            <p style="font-size: 18px;" class="line-devidler">· · · ·</p>
            <p class="tc">{{item.decPrice}}<span>￥</span></p>
            <p style="font-size: 12px;" class="tc"><a>立即使用</a></p>
          </section>
          <aside class="pl15">
            <h2 class="f16" :class="{use: status !== item.status}">满{{item.fullPrice}}元使用</h2>
            <span class="mt10 f14">有效期 2018/11/27-2019/02/15</span>
          </aside>
          <img v-if="item.status === 2" src="../img/using.png"/>
          <img v-else-if="item.status === 3" src="../img/overdue.png"/>
          <a class="rurels f12" href="./using-ruler/main">使用规则</a>
        </li>
      </ul>
      <ul v-else>
        <li v-if="item.status === 3" v-for="item in coupons" :key="item.index">
          <section :class="{using: status !== item.status}">
            <p style="font-size: 18px;" class="line-devidler">· · · ·</p>
            <p class="tc">{{item.decPrice}}<span>￥</span></p>
            <p style="font-size: 12px;" class="tc"><a>立即使用</a></p>
          </section>
          <aside class="pl15">
            <h2 class="f16" :class="{use: status !== item.status}">满{{item.fullPrice}}元使用</h2>
            <span class="mt10 f14">有效期 2018/11/27-2019/02/15</span>
          </aside>
          <img v-if="item.status === 2" src="../img/using.png" width="104"/>
          <img v-else-if="item.status === 3" src="../img/overdue.png" width="104"/>
          <a class="rurels f12" href="./using-ruler/main">使用规则</a>
        </li>
      </ul>
      <p class="f12 tc pt20 pb10" style="color: #A2A2A2">我们也是有底线的</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'coupon',
    data () {
      return {
        status: 1,
        loading: false,
        selected: 'index1',
        fixed: true,
        current: 'tab1',
        coupons: [
          {id: 1, status: 1, fullPrice: 100, decPrice: 10},
          {id: 2, status: 2, fullPrice: 2000, decPrice: 200},
          {id: 3, status: 1, fullPrice: 300, decPrice: 30},
          {id: 4, status: 2, fullPrice: 50, decPrice: 5},
          {id: 5, status: 3, fullPrice: 200, decPrice: 20},
          {id: 3, status: 3, fullPrice: 300, decPrice: 30},
          {id: 4, status: 2, fullPrice: 50, decPrice: 5},
          {id: 5, status: 3, fullPrice: 200, decPrice: 20}
          ]
      };
    },
    methods: {
      loadMore () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 2500);
      },
      handleChange (el) {
        this.current = el.mp.detail.key;
      }
    },
    created () {
    }
  };
</script>

<style lang='stylus' scoped>
  #coupon
    ul
      li
        display flex; position relative; padding: 10px 15px 10px 10px; min-height 60px; border-radius 3px; margin-bottom 5px; background #fff;
        section
          min-width: 75px;padding 0 5px 10px 5px; min-height: 85px;background #F54727; position relative;
          .line-devidler
           line-height: 10px; text-align: center; color: #fff; margin 10px 0;
          .line-devidler:after,.line-devidler:before
            position absolute; content "";height 10px; width 5px; background #ffff;
          .line-devidler:after
            right 0; border-radius 10px 0 0 10px;
          .line-devidler:before
            left 0;border-radius: 0 10px 10px 0;
          p
            font-size 32px; font-weight 500; color #fff;
            &> span
              display inline-block; vertical-align super; font-size 18px;
            &> a
              color #fff;
        section.using
          background #868686;
        aside
          h2
           margin-top 25%;  font-weight 500; color #F54727;
          h2.use
            color #868686;
          span
            white-space nowrap; color #AEAEAE;
        img
          position absolute; right 0; bottom 10px; width 104px; height 67px;
        .rurels
         position absolute; right 5%;
</style>
